<template>
	<view class="">
		<!-- 提交内容 -->
		<view class="submit_contant">
			<view class="submit_contant_contant">
				<view class="left">
					<i class="icon">&#xe83d;</i>
					提交内容
				</view>
				<view class="right"><textarea value="" v-model="content" placeholder-style="font-size:28upx;color:#999" placeholder="请输入本次提交的内容评述" /></view>
			</view>
			<view class="upimg">
				<view class="left">上传照片</view>
				<view class="right">
					<view class="right_pic">
						<view class="right_pic_p" v-for="(item, index) in imageSrc" :key="index">
							<image @tap="pri(index)" :src="item + '?x-oss-process=image/auto-orient,1'" mode="aspectFill"></image>
							<!-- <image @tap="pri" :src="item" ></image> -->
							<view class="delet" @tap="deletimg(index)"><image src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/newPicter/delet.png" mode=""></image></view>
						</view>
						<image v-if="imageSrc.length < 3" @tap="upimg()" src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/mine/rw_upimg.png" mode=""></image>
					</view>
					<view class="tips">仅支持jpg、png图片上传，大小不超过5M</view>
				</view>
			</view>
		</view>
		<!-- 提交按钮 -->
		<view class="submit_btn" @tap="submit"><view class="btn">立即提交</view></view>
		<navigation></navigation>
	</view>
</template>

<script>
import { pathToBase64, base64ToPath } from '@/js_sdk/gsq-image-tools/image-tools';
import navigation from '@/components/navigation/navigation.vue';
export default {
	components: {
		navigation
	},
	data() {
		return {
			content: '',
			imageData: [],
			imageSrc: []
		};
	},
	methods: {
		// 提交投诉建议
		submit() {
			this.ajax('sys/addFade', {
				data: {
					content: this.content,
					img: this.imageSrc
				},
				success: res => {
					this.toast(res.msg);
					if(res.code) {
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							});
						}, 2000);
					}else {
						
					}
				}
			});
		},
		deletimg(key) {
			this.imageSrc.splice(key, 1);
			this.imageData.splice(key, 1);
		},
		pri(key) {
			uni.previewImage({
				current: key,
				indicator: 'default',
				urls: this.imageSrc,
				longPressActions: {
					itemList: ['发送给朋友', '保存图片', '收藏'],
					success: function(data) {
						 // console.log ('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					},
					fail: function(err) {
						 // console.log (err.errMsg);
					}
				}
			});
		},
		upimg() {
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				success: res => {
					var sys_info = uni.getSystemInfoSync();
					if (sys_info.version) {
						uni.showLoading({
							title: '图片上传中'
						});
						var arr = res.tempFilePaths[0].split('/');
						var filename = arr[arr.length - 1];
						this.oss_upload(res, filename, {
							success: res => {
								var src = 'https://ykp-new.oss-cn-hangzhou.aliyuncs.com/' + filename;
								// this.header_img = filename;
								this.imageSrc = this.imageSrc.concat(src);
								uni.hideLoading();
							},
							fail: ress => {}
						});
					} else {
						pathToBase64(res.tempFilePaths[0])
							.then(base64 => {
								//  // console.log (base64,111)
								this.header_img = base64;
								this.img_type = base64.split(';')[0].split('/')[1];
								uni.showLoading({
									title: '图片上传中'
								});
								// 获取图片信息
								//获取文件名称
								var arr = res.tempFilePaths[0].split('/');
								var filename = arr[arr.length - 1];
								var timestamp = new Date().getTime();
								var name = timestamp + '.' + this.img_type;
								this.oss_upload(res, name, {
									success: res => {
										var src = 'https://ykp-new.oss-cn-hangzhou.aliyuncs.com/' + name;
										// this.header_img = filename;
										this.imageSrc = this.imageSrc.concat(src);
										uni.hideLoading();
									},
									fail: ress => {}
								});
							})
							.catch(error => {
								console.error(error);
							});
					}
				}
			});
		}
	}
};
</script>
<style></style>
<style lang="less" scoped>
.submit_contant {
	width: 100%;
	padding: 30upx;
	background-color: #ffffff;
	box-sizing: border-box;
	.submit_contant_contant {
		margin-bottom: 30upx;
		display: flex;
		.left {
			width: 170upx;
			font-size: 28upx;
			color: #333333;
			margin-top: 20upx;
			.icon {
				font-size: 20upx;
				color: #d81e06;
			}
		}
		.right {
			flex: 1;
			textarea {
				width: 520upx;
				height: 220upx;
				border-radius: 10upx;
				border: 2upx solid #e1e1e1;
				padding: 20upx;
				box-sizing: border-box;
				font-size: 28upx;
				color: #333333;
			}
		}
	}
	.upimg {
		display: flex;
		.left {
			width: 170upx;
			font-size: 28upx;
			color: #333333;
			padding-left: 24upx;
		}
		.right {
			.right_pic {
				width: 520upx;
				display: flex;
				flex-wrap: wrap;
				image {
					width: 120upx;
					height: 120upx;
					margin-right: 10upx;
					margin-bottom: 10upx;
				}
				image:nth-of-type(4n) {
					margin-right: 0;
				}
			}
			.right_pic_p {
				position: relative;
				.delet {
					position: absolute;
					width: 32upx;
					height: 32upx;
					border-radius: 50%;
					background-color: #ffffff;
					top: -10upx;
					right: 2upx;
					image {
						display: block;
						width: 32upx;
						height: 32upx;
					}
				}
			}
			image {
				width: 120upx;
				height: 120upx;
			}
			.tips {
				font-size: 24upx;
				color: #999;
				margin-top: 20upx;
			}
		}
	}
}
.submit_btn {
	width: 100%;
	padding: 0 30upx;
	margin-top: 60upx;
	box-sizing: border-box;
	.btn {
		width: 100%;
		height: 92upx;
		border-radius: 46upx;
		font-size: 32upx;
		color: #ffffff;
		text-align: center;
		line-height: 92upx;
		background-color: #8838d2;
	}
}
</style>
